<template>
	<div class="system-menu-dialog-container">
		<el-dialog title="权限资源选择" v-model="state.dialog.isShowDialog" width="1650px">
			<el-card shadow="hover" class="layout-padding-auto" :body-style="{
				paddingBottom: '0px'
			}">
				<el-form :model="state.queryParms" :inline="true">
					<el-form-item label-width="100px" label="资源名称">
						<el-input v-model="state.queryParms.params.resourceName" class="input-width"
							placeholder="资源名称，模糊查询"></el-input>
					</el-form-item>
					<el-form-item label-width="100px" label="资源编码">
						<el-input v-model="state.queryParms.params.resourceCode" class="input-width"
							placeholder="所属微服务，模糊查询">
						</el-input>
					</el-form-item>
					<el-form-item label-width="100px" label="所属微服务">
						<el-input v-model="state.queryParms.params.belongMicroservice" class="input-width"
							placeholder="所属微服务，模糊查询">
						</el-input>
					</el-form-item>
					<el-form-item label-width="100px" label="资源验证式">
						<el-select v-model="state.queryParms.params.method" placeholder="请选择资源验证式">
							<el-option v-for="i in state.authMethodList" :label="i.label" :value="i.value"
								:key="i.value"></el-option>
						</el-select>
					</el-form-item>
					<div style="line-height: 40px;display: inline-block;position: absolute;">
						<el-button size="default" type="primary" class="ml10" @click="query()">
							过滤
						</el-button>
						<el-button size="default" type="success" class="ml10" @click="handleResetSearch()">
							重置
						</el-button>

						<el-button size="default" type="primary" class="ml10" @click="changgerBelongMicroservice()">
							确认
						</el-button>


					</div>
				</el-form>


			</el-card>
			<el-card shadow="hover" class="layout-padding-auto" style="margin-top: 20px;">
				<el-table size="default" ref="singleTable" :data="state.dataList" style="width: 100%" @select="selectRow">
					<el-table-column type="selection" width="45"></el-table-column>
					<el-table-column label="id" prop="resourceId" width="100"></el-table-column>
					<el-table-column label="资源名称" prop="resourceName" width="350"></el-table-column>
					<el-table-column label="资源路径" prop="resourceFullPath" width="550"></el-table-column>
					<el-table-column label="资源验证式" prop="method"></el-table-column>
					<el-table-column label="所属微服务" prop="belongMicroservice"></el-table-column>
				</el-table>
				<el-card class="pagination-container">
					<el-pagination background="" @size-change="handleSizeChange" @current-change="handleCurrentChange"
						layout="total, sizes,prev, pager, next,jumper" :current-page.sync="state.page"
						:page-size="state.limit" :page-sizes="[5, 10, 15, 20, 50]" :total="state.total"></el-pagination>
				</el-card>
			</el-card>

		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemMenuDialog">

import { reactive, onMounted, watch, ref } from 'vue';


// 导入接口
import { useSysApi } from "../../../api/sys";






// 定义子组件向父组件传值/事件
const emit = defineEmits(['selectCode']);

const singleTable = ref();

const state = reactive({
	page: 1,
	limit: 10,
	total: 0,
	dataList: [],
	currentRow: {},
	authMethodList: [
		{ label: "不用授权", value: "NOAUTH" },
		{ label: "需登录", value: "ALLSYSTEMUSER" },
		{ label: "需授权", value: "BYUSERPERMISSION" }
	],
	queryParms: {
		params: {
			resourceName: "",
			belongMicroservice: "",
			resourceCode: "",
			method: ""
		},
		sorts: "resource_id desc"
	},

	dialog: {
		isShowDialog: false
	}
});



const selectRow = (selection: any, row: any) => {
	state.currentRow = row;
	if (selection.length > 1) {
		singleTable.value.clearSelection();
		singleTable.value.toggleRowSelection(selection.pop());
	}
}

const changgerBelongMicroservice = () => {
	let currentRow = state.currentRow;
	if (!currentRow["resourceId"]) return;

	emit('selectCode', currentRow);

	onCancel();

};


// 打开弹窗
const openDialog = () => {
	state.currentRow = {};
	state.dialog.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};


// 取消
const onCancel = () => {
	closeDialog();
};


const handleCurrentChange = (val: any) => {
	state.page = val;
	query();
}

const handleSizeChange = (val: any) => {
	state.limit = val;
	query();
}

const query = async () => {

	let queryParms = {
		params: {},
		sorts: "resource_id desc"
	};

	if (state.queryParms.params.resourceName) queryParms.params["resourceName"] = state.queryParms.params.resourceName;
	if (state.queryParms.params.belongMicroservice) queryParms.params["belongMicroservice"] = state.queryParms.params.belongMicroservice;
	if (state.queryParms.params.resourceCode) queryParms.params["resourceCode"] = state.queryParms.params.resourceCode;
	if (state.queryParms.params.method) queryParms.params["method"] = state.queryParms.params.method;



	let res = await useSysApi().queryOperateLegalPower("f8c3d11952196739e55f80f472a52693", state.page, state.limit, queryParms);
	state.total = res.total;
	state.dataList = res.list;
	console.log(res)
}

const handleResetSearch = () => {
	state.queryParms = Object.assign({}, {}, {
		params: {
			resourceName: "",
			belongMicroservice: "",
			resourceCode: "",
			method: "BYUSERPERMISSION"
		},
		sorts: "resource_id desc"
	});
	state.page = 1;
	state.limit = 10;
	query();
}




watch(
	() => state.dialog.isShowDialog,
	(newValue) => {
		if (newValue == true) {
			handleResetSearch();
		}
	}, { immediate: true }
);





// 暴露变量
defineExpose({
	openDialog,
});






</script>

<style  lang="scss">
.system-menu-dialog-container .el-table__header .el-table-column--selection .cell {
	display: none;
}

.pagination-container {
	margin-top: 50px;
}
</style>